<template>
  <div class="loong">
    <p>龙</p>
    <div>
      <input type="text" v-model="loong.name" placeholder="名称">
      <input type="text" v-model="loong.gender" placeholder="性别">
    </div>
    <div>
      name: {{ loong.name }} / gender: {{ loong.gender }}
    </div>
  </div>
</template>

<script>
// 选项式API
export default {
  name: 'Loong',
    // 生命周期钩子
  beforeCreate(){
    console.log( '- - - before create - - -' );
  },
  created(){
    console.log( '- - - created - - -' );
  }
}
</script>

<!-- 组合式API -->
<!-- 在 <script setup> 内部书写的代码等同于在 setup 函数中书写代码 -->
<script setup>
  console.log( '- - - setup - - -');
  import { reactive , getCurrentInstance } from 'vue';
  import { onBeforeMount, onMounted } from 'vue';

  import { useRoute , useRouter } from 'vue-router';
  
  let route = useRoute(); // 获得当前路由
  console.log( route );

  let router = useRouter(); // 获得路由器(分发器)
  console.log( router );

  // 注册生命周期钩子
  onBeforeMount( () => console.log( '- - - before mount - - -') );
  onMounted( () => { 
    console.log( '- - - mounted - - -' ); 
    let self = getCurrentInstance(); // 获得当前组件
    console.log( self );
  });

  const loong = reactive( { name: '敖广' , gender: '靓仔' });
</script>

<style scoped>
.loong {
  margin: 15px;
  border: 1px solid #dedede;
  box-shadow: 0 0 20px -10px blue;
}
</style>